<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>飞鱼直播</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/room.css">
    <script src="${pageContext.request.contextPath}/js/ip.js"></script>
    <script src="${pageContext.request.contextPath}/js/room.js"></script>
    <script src="${pageContext.request.contextPath}/jsp/chplayer/chplayer.min.js"></script>
</head>
<body>
<div id="content">
    <table>
        <tr>
            <%--主播信息区--%>
            <td class="room_title" style="border: 1px solid aqua;">
                <ul>
                    <%--头像--%>
                    <li class="photoImg"><img src="${requestScope.queryAnchorByRoomId.photoImgUrl}" alt=""></li>
                    <%--主播信息--%>
                    <li class="anchorInfo">
                        <input type="hidden"  id="anchorUserId" value="${requestScope.queryAnchorByRoomId.userId}">
                        <input type="hidden"  id="anchorBalance" value="${requestScope.queryAnchorByRoomId.balance}">
                        <%--房间名--%>
                        <div>房间名：${requestScope.queryAnchorByRoomId.roomName}</div>
                        <%--直播类型--%>
                        <div>直播类型${requestScope.queryAnchorByRoomId.liveBroadcastType}</div>
                        <%--主播名 & 等级--%>
                        <div>主播：${requestScope.queryAnchorByRoomId.nickName}</div>
                        <%--个性签名--%>
                        <div>个签：${requestScope.queryAnchorByRoomId.signInfo}</div>
                    </li>
                </ul>
            </td>
            <%--弹幕区--%>
            <td rowspan="3" class="barrage" style="border: 1px solid aqua;">
                <div class="messages">
                </div>
                <c:if test="${empty sessionScope.loginUser}" var="isLogin">
                    <div class="noLogin">
                        <a href="${pageContext.request.contextPath}/jsp/login.jsp"><span>登录</span></a>参与互动
                    </div>
                </c:if>
                <c:if test="${!isLogin}">
                    <div class="chat">
                        <input type="hidden" name="nickName" value="${sessionScope.loginUser.nickName}"
                               class="nickName">
                        <input type="text" name="message" class="message" placeholder="发送弹幕">
                        <input type="button" name="send" value="发送" class="send">
                    </div>
                </c:if>
            </td>
        </tr>
        <tr>
            <%--视频直播区--%>
            <td class="videoFrame" style="border: 1px solid aqua;">
                <div id="video" style="width: 100%; height: 100%;"></div>
                <script type="text/javascript">
                    var videoObject = {
                        container: '#video', //“#”代表容器的ID，“.”或“”代表容器的class
                        variable: 'player', //该属性必需设置，值等于下面的new chplayer()的对象
                        video: 'rtmp://39.105.176.77/hls${requestScope.queryAnchorByRoomId.roomUrl}'
                    };
                    var player = new chplayer(videoObject);
                </script>
            </td>

        </tr>
        <tr>
            <%--礼物区--%>
            <td class="gift" style="border: 1px solid aqua;">
                <ul>
                    <c:forEach items="${applicationScope.allGifts}" var="gift">
                        <li>
                            <div class="giftInfo">
                                <p>${gift.giftName}</p>
                                <p>鱼币：<span class="price">${gift.giftPrice}</span></p>
                            </div>
                            <div class="giftImg">
                                <img class="imgUrl" src="${pageContext.request.contextPath}${gift.giftImgUrl}" alt="">
                            </div>

                        </li>
                    </c:forEach>
                </ul>
                <%--<div id="gif"><img id="gif_url" src="" alt=""></div>--%>

            </td>
        </tr>
    </table>
</div>


</body>
</html>
